<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
  <div class="ex-diolog-title">客户信息</div>
  <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="120px" class="demo-ruleForm" v-loading="loading">
      <el-form-item label="客户名称：" prop="clientName">{{ruleForm.clientName}}</el-form-item>
      <el-form-item label="行业类型：" prop="industryType">{{ruleForm.industryTypeDict}}</el-form-item>
      <el-form-item label="创建时间：" prop="createTime">{{ruleForm.createTime}}</el-form-item>
      <el-form-item label="客户地址：" prop="customerAddress">{{customerAddress}}</el-form-item>
      <el-form-item label="详细地址：" prop="address">{{ruleForm.address}}</el-form-item>
      <el-form-item label="门店数量：" prop="shopNum">{{ruleForm.shopNum}}</el-form-item>
      <el-form-item label="客户对接人：" prop="contactPerson">{{ruleForm.contactPerson}}</el-form-item>
      <el-form-item label="联系方式：" prop="phone">{{ruleForm.phone}}</el-form-item>
      <el-form-item label="客户类型：" prop="clientType">{{ruleForm.clientTypeDict}}</el-form-item>
      <el-form-item label="客户级别：" prop="clientLevel">{{clientTypeListName[ruleForm.clientLevel-1]}}</el-form-item>
      <el-form-item label="客户述求：" prop="appealList">{{appealListName}}</el-form-item>
      <el-form-item label="其他述求：" prop="otherAppeal" v-if="isOther">{{ruleForm.otherAppeal}}</el-form-item>
      <el-form-item label="抖音来客账号：" prop="tiktokVisitorAccount">{{ruleForm.tiktokVisitorAccount}}</el-form-item>
      <el-form-item label="客户负责人：" prop="responsibleNameList">{{responsibleNameListName}}</el-form-item>
		</el-form>
    <div slot="footer">
      <el-button @click="handleClose('ruleForm')">关闭</el-button>
    </div>
  </ex-dialog>
</template>
<script>
// api
import {
  clientFilingDetail
} from "@/api/customer/reportingForm";
import { getCity } from "@/api/clientManagement";
export default {
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading: false,
      title: '查看客户资料',
      cityList: [], //省市区
      industryTypeList: [],//行业类型
      clientTypeList: [],//客户类型人列表
      clientLevelList: [],//客户级别列表
      appealListArray: [],//客户述求列表
      customerAddress:'',//客户地址
      responsibleNameListName:'',//客户负责人
      appealListName:'',//客户述求名称
      // 客户级别名称
      clientTypeListName: [
        'S 门店数大于等于100家/线上月度销售额大于等于250万元',
        'A 门店数大于等于20家/线上月度销售额小于250万，大于等于70万元',
        'B 门店数小于等于10家/线上月度销售额小于70万元，大于等于10万',
        'C 门店数小于等于3家/线上月度销售额小于10万元，大于等于3万',
        '渠道运营商'
      ],
      isOther:false,
			ruleForm: {
        clientName:'',//客户名称
        industryType:'',//行业类型
        createTime:'',//创建时间
        province:'',//省
        city:'',//市
        area:'',//区
        address:'',//详细地址
        shopNum:'',//门店数量
        contactPerson:'',//客户对接人
        phone:'',//联系方式
        clientType:'',//客户类型
        clientLevel:'',//客户级别
        appealList:[],//客户述求
        otherAppeal:'', // 其他述求
        tiktokVisitorAccount:'', // 抖音来客账号
        responsibleNameList:[], // 客户负责人
      },


    }
  },
  created() {
    this.getInfo()
	},
  methods: {
     async getInfo(){
      await this.getCityList()
      await this.getStatusList()  
      this.getDetail()  
     },
      //查询城市数据
      async getCityList() {
        const params = {};
        var res = await getCity(params)
        this.cityList = res.result;
            // console.log('this.cityList',this.cityList)
            this.cityList.forEach((item) => {
              item.children.forEach((items) => {
                items.children.forEach((itemss) => {
                  if (itemss.children.length == 0) {
                    itemss.children = null
                  }
                })
              })
            })
    },

/**
 * 根据3串6位数字获取地址
 * @param codeString
 * @param options
 * @returns {string}
 */
  getAddressNamesByCode(codeString, options = addressOptions) {
      let names = [];
      // 从字符串中提取行政区划代码序列
      const codeArray = codeString.split(',');
      // 递归查找函数
      function findAddress(name, option, codes) {
        if (codes.length === 0 || !option.children) {
          return;
        }
        const targetCode = codes[0];
        const childOption = option.children.find(child => child.id === targetCode);
        if (childOption) {
          names.push(childOption.label);
          findAddress(childOption.label, childOption, codes.slice(1));
        }
      }
      // 开始查找
      findAddress('', { children: options }, codeArray);
      // 返回连接后的地址名称
      return names.join('/');
  },
  // 根据字典值获取客户诉求名称
  getStatusList() {
  var dictType = "bee_client_filing_appeal";
  this.$getSelectList(dictType)
    .then((res) => {
      this.appealListArray = res.result[0].dictList
    })
    .finally(() => { });
},
//活动详情
getDetail(){
  this.loading  = true
  var id = this.id
  clientFilingDetail(id).then(res => {
    this.ruleForm = res.result
    this.responsibleNameListName = this.ruleForm.responsibleNameList.join('/')
    let appealListName = []
    // 根据客户诉求id列表 获取 其名称
    this.ruleForm.appealList.forEach(vo=>{
      let objWithId = this.appealListArray.find(obj => obj.id === vo);
      let value = objWithId ? objWithId.value : '';
      if(value){
        appealListName.push(value)
      }
    })
    this.appealListName = appealListName.join('/')
    // 根据 code 获取省市区名称
    let addressCode = this.ruleForm.province+','+this.ruleForm.city+','+ this.ruleForm.area
    this.customerAddress = this.getAddressNamesByCode(addressCode,this.cityList)
    this.isOther = this.ruleForm.appealList.find(obj => obj == 5)?true:false
    this.loading  = false
  }).catch(err=>{
    this.loading  = false
  })
},
//取消
handleClose(formName) {
  this.$emit('update:visible', false)
  // this.$refs[formName].resetFields();
},
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep {
    .ex-diolog-title{
      font-size: 23px;
      font-weight: bold;
      margin-left: 20px;
      margin-bottom:20px;
    }
    .ex--dialog--footer{
      padding: 10px 20px;
    }
    .ex--dialog--main {
      //  padding: 10px 20px !important; 
    }
    .el-input{
      width: 350px;
 }
  }
}

</style>